<template>
  <div id="stus">
      <div id="stustop">
        <div id="mysearch">
          <el-row class="demo-autocomplete">
            <el-col :span="24">
              <el-autocomplete
                class="inline-input"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入姓名"
                :trigger-on-focus="false"
                @select="handleSelect"
              ></el-autocomplete>
              <el-button icon="el-icon-search" circle></el-button>
            </el-col>
          </el-row>
        </div>
        <div id="myradio">
          <el-radio-group v-model="radio" size="medium">
            <el-radio-button label="全部" ></el-radio-button>
            <el-radio-button label="一班"></el-radio-button>
            <el-radio-button label="二班"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="stulist">
        <el-table :data="tableData" borderstyle="width: 100%">
          <el-table-column
            fixed
            prop="number"
            label="学号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="class"
            label="班别"
            width="120">
          </el-table-column>
          <el-table-column
            prop="task"
            label="近期作业(分)"
            width="120">
          </el-table-column>
          <el-table-column
            prop="test"
            label="近期测试(分)"
            width="120">
          </el-table-column>
          <el-table-column
            prop="exam"
            label="近期考试(分)"
            width="120">
          </el-table-column>
          <el-table-column
            prop="checkwork"
            label="近一周缺勤次数"
            width="120">
          </el-table-column>
          <el-table-column
            prop="classrank"
            label="班级排名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="professionalrank"
            label="专业排名"
            width="120">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
  
</template>

<script>
  
export default {
  	data () {
      return {
        radio: '全部',
        restaurants:[],
        state2:'',
        tableData: [
          {
            number:'01',
            name:'同学1',
            class:'一班',
            task:'90',
            test:'90',
            exam:'90',
            checkwork:'0',
            classrank:'1',
            professionalrank:'1'
          },
          {
            number:'02',
            name:'同学2',
            class:'二班',
            task:'90',
            test:'90',
            exam:'90',
            checkwork:'0',
            classrank:'2',
            professionalrank:'2'
          },
          {
            number:'03',
            name:'同学3',
            class:'一班',
            task:'90',
            test:'90',
            exam:'90',
            checkwork:'0',
            classrank:'3',
            professionalrank:'3'
          }
        ]
      };
    },
    methods:{
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "同学1", "number": "01" },
          { "value": "同学2", "number": "02" },
          { "value": "同学3", "number": "03" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleClick(row) {
        console.log(row);
        var stuname=row.name;
        console.log(stuname);
        this.$router.push({path:'/Stumessage',params:{stuname}});
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
}
</script>

<style type="text/css">
  #stus{
    margin-left: 12.5%;
  }
  #myradio{
    margin-top: 10px;
    margin-right: 35px;
    margin-bottom: 10px;
  }
  #mysearch{

  }
</style>